<template>
	<view>
		<view class="duilianpt" v-for="(item,inx) in dataList.meansList" :key="inx">
				
				<view v-if="[0,1].indexOf(item.isTrue)">
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.ball,item.is_true,24)">
						<u-col span="12">
							<view class="text-center" v-if="item.means.ball && item.means.ball.length">
								<text class="black-text">精选:</text>
								<text class="red-text" v-for="(vl,vk) in item.means.ball" :key="vk">
									<text :class="{'draw-active' : vl.isTrue,'blue-text':(vl.color == 'blue'), 'green1-text':(vl.color == 'green'), 'red-text':(vl.color == 'red')}" style="margin-left:10rpx;">{{vl.value}}</text>
								</text>
							</view>
						</u-col>
					</u-row>
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.xiao,item.is_true,1)">
						<u-col span="3">
							<view class="text-center black-text"><text>{{item.issue}}期:①肖</text></view>
						</u-col>
									
						<u-col span="6">
							<view class="zodiac" v-if="item.means.xiao && item.means.xiao.length">
								<view class="item">
									<template v-for="(vl,vk) in item.means.xiao">
										<text v-if="vk < 1" :class="{'draw-active' : vl.isTrue}" >{{vl.value}}</text>
									</template>
								</view>
							</view>
						</u-col>
									
						<u-col span="3">
							<view>
								<text class="black-text">
									开:{{item.drawp || '??'}}
									<text v-if="item.is_true == 1" class="red-text">中</text>
								</text>
							</view>
						</u-col>
					</u-row>
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.xiao,item.is_true,3)">
						<u-col span="3">
							<view class="text-center black-text"><text>{{item.issue}}期:③肖</text></view>
						</u-col>
								
						<u-col span="6">
							<view class="zodiac" v-if="item.means.xiao && item.means.xiao.length">
								<view class="item">
									<template v-for="(vl,vk) in item.means.xiao">
										<text v-if="vk < 3" :class="{'draw-active' : vl.isTrue}" >{{vl.value}}</text>
									</template>
								</view>
							</view>
						</u-col>
								
						<u-col span="3">
							<view>
								<text class="black-text">
									开:{{item.drawp || '??'}}
									<text v-if="item.is_true == 1" class="red-text">中</text>
								</text>
							</view>
						</u-col>
					</u-row>
					
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.xiao,item.is_true,5)">
						<u-col span="3">
							<view class="text-center black-text"><text>{{item.issue}}期:⑤肖</text></view>
						</u-col>
									
						<u-col span="6">
							<view class="zodiac" v-if="item.means.xiao && item.means.xiao.length">
								<view class="item">
									<template v-for="(vl,vk) in item.means.xiao">
										<text v-if="vk < 5" :class="{'draw-active' : vl.isTrue}" >{{vl.value}}</text>
									</template>
								</view>
							</view>
						</u-col>
									
						<u-col span="3">
							<view>
								<text class="black-text">
									开:{{item.drawp || '??'}}
									<text v-if="item.is_true == 1" class="red-text">中</text>
								</text>
							</view>
						</u-col>
					</u-row>
					
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.xiao,item.is_true,7)">
						<u-col span="3">
							<view class="text-center black-text"><text>{{item.issue}}期:⑦肖</text></view>
						</u-col>
									
						<u-col span="6">
							<view class="zodiac" v-if="item.means.xiao && item.means.xiao.length">
								<view class="item">
									<template v-for="(vl,vk) in item.means.xiao">
										<text v-if="vk < 7" :class="{'draw-active' : vl.isTrue}" >{{vl.value}}</text>
									</template>
								</view>
							</view>
						</u-col>
									
						<u-col span="3">
							<view>
								<text class="black-text">
									开:{{item.drawp || '??'}}
									<text v-if="item.is_true == 1" class="red-text">中</text>
								</text>
							</view>
						</u-col>
					</u-row>
					
					<u-row  justify="space-between" gutter="10" v-if="isShowRow(item.means.xiao,item.is_true,9)">
						<u-col span="3">
							<view class="text-center black-text">
								<text>{{item.issue}}期:⑨肖</text>
							</view>
						</u-col>
									
						<u-col span="6">
							<view class="zodiac" v-if="item.means.xiao && item.means.xiao.length">
								<view class="item">
									<template v-for="(vl,vk) in item.means.xiao">
										<text :class="{'draw-active' : vl.isTrue}" >{{vl.value}}</text>
									</template>
								</view>
							</view>
						</u-col>
									
						<u-col span="3">
							<view>
								<text class="black-text">
									开:{{item.drawp || '??'}}
									<text v-if="item.is_true == 1" class="red-text">中</text>
								</text>
							</view>
						</u-col>
					</u-row>
								
					<view class="blue-text">{{dataList.remarks}}</view>
				</view>
		</view>
		
	</view>
</template>

<script>
export default {
	name: 'JingXuan',
	props: {
	    // 定义一个名为dataList的prop来接收数组数据
	    dataList: {
	      type: [Object,Array],
	      default: () => {
	    	  return {};
	      },
	    },
		isShowAll :{
			type:[Boolean],
			default : () =>{
				return false;
			}
		},
	},
	data(){
		return {
			
		}
	},
	mounted() {
	},
	methods: {
		isShowRow(item,isTrue,nub){
			if(isTrue == 1) {
				var flag = false;
				for(var i=0; i<item.length; i++) {
					if(i < nub) {
						if(item[i].isTrue) {
							flag = true;
							break;
						}
					}
				}
				return flag;
			}else if(isTrue == 2) {
				return false;
			}else{
				return true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/static/css/common.css";
</style>
